<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每日笔记</title>
</head>
<style>
    .kkk {
        font-size: 18px;
    }
</style>
<body>
<ul id="ul">
    <li id="li" class="qqq www">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<img id="img" src="1.jpg" title="1.jpg">
<input id="in">
<div class="kkk" style="display: none">
    <p>787878</p>
    <script>
        console.log(123)
    </script>
</div>
</body>
<script>
    //获取元素节点
    let ul = document.querySelector('#ul');
    let li = document.querySelector('#li');

    console.log(ul);
    console.log(li);

    //获取元素下的子节点,都是集合，当做他们都是一组数组，那当要拿出他们单独的一个需要使用数组的方式
    //单纯获取HTML的元素节点使用children
    //如果需要获取全部节点使用childNodes
    //获取仔细的节点的，可以使用数组下标
    //console.log(ul.children[].children);
    console.log(ul.children);//包含下面的每一个元素节点
    console.log(ul.childNodes);//节点集合，包含下面的所有节点，连文本节点都包含进去了

    //获取父节点,获取父节点时可以无限往上追加的，
    // 使用方法  console.log(li.parentNode。parentNode。parentNode。parentNode);
    console.log(li.parentNode);
    console.log(li.parentElement);

    //获取img的元素对象
    let img = document.querySelector('#img');
    console.log(img.src+'______'+img.title);
    img.src='xx.png';
    img.title='123';


    let input = document.querySelector('#in');
    input.value='122';
    console.log(input.value);

    console.log(li.className);//字符串类型
    console.log(li.classList);//获取的是一个数组类型

    li.className='ooo ppp';
    li.classList.value='iii  aaa';

    let kk = document.querySelector('.kkk');

    //获取里面内容的方法,相对于文本来说他们获取的是一样的，
    // innerHTML所有的东西都会被捕获到
    console.log(kk.innerHTML);//这个就算里面有标签也不会吧标签获取
    //捕获不到script
    console.log(kk.innerText);//如果里面有标签，他会把标签一起获取了
    //他会到script里面的东西，然后把他变成文本的形式
    console.log(kk.textContent);//这个就算里面有标签页不会吧标签获取

    //设置里面的内容
    //例子<ol><li>hhh<li><ol>
    //.innerHTML得到hhh
    //innerText直接将全部内容变成文本放上去
    //textContent直接将全部内容变成文本放上去
    //我们设置的代码里面如果包含HTML标签，我们需要解析的话使用innerHTML
    kk.textContent = '<ol><li>hhh</li></ol>';

    //智能获取元素的内联样式
    console.log(kk.style.display);
    kk.style.display='block';
    kk.style.fontSize= '30px';
</script>
</html>